<template>
    <div class="left-bottom-container">
        <el-table
            :data="tableData"
            style="width: 100%; height: 100%"
            :header-cell-style="headerCellStyle"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            stripe
            height="100%"
        >
            <el-table-column prop="siteName" label="站点名称" width="200" align="center"/>
            <el-table-column prop="frequency" label="无人车频次" align="center">
                <template #default="{ row }">
                    <span :class="getFrequencyClass(row.frequency)">{{ row.frequency }}次/天</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 定义表格数据类型
interface StationData {
    siteName: string
    frequency: number
}

// 表格数据（20个站点的无人车访问频次）
const tableData = ref<StationData[]>([
    // { siteName: '渤海路商业广场', frequency: 45 },
    // { siteName: '庆云县政务中心', frequency: 38 },
    // { siteName: '中心街金宇商城', frequency: 52 },
    // { siteName: '渤海路汽车站', frequency: 67 },
    // { siteName: '庆云县人民医院', frequency: 41 },
    // { siteName: '渤海路小学', frequency: 29 },
    // { siteName: '庆云县体育中心', frequency: 33 },
    // { siteName: '渤海路工业园', frequency: 58 },
    // { siteName: '庆云县第一中学', frequency: 24 },
    // { siteName: '渤海路社区服务中心', frequency: 36 },
    // { siteName: '庆云县图书馆', frequency: 19 },
    // { siteName: '渤海路农贸市场', frequency: 63 },
    // { siteName: '庆云县文化广场', frequency: 27 },
    // { siteName: '渤海路科技园', frequency: 49 },
    // { siteName: '庆云县中医院', frequency: 35 },
    // { siteName: '渤海路物流中心', frequency: 71 },
    // { siteName: '庆云县公园', frequency: 22 },
    // { siteName: '渤海路购物中心', frequency: 56 },
    // { siteName: '庆云县火车站', frequency: 74 },
    // { siteName: '渤海路创业园', frequency: 31 }
])

// 访问频次颜色判断
const getFrequencyClass = (frequency: number) => {
    if (frequency >= 60) return 'frequency-high'
    if (frequency >= 40) return 'frequency-medium'
    if (frequency >= 25) return 'frequency-low'
    return 'frequency-very-low'
}

// 表格样式配置
const headerCellStyle = {
    background: 'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: '14px',
    borderBottom: '1px solid #3b82f6'
}

const rowStyle = {
    background: 'transparent'
}

const cellStyle = {
    background: 'transparent',
    color: '#e2e8f0',
    borderBottom: '1px solid rgba(59, 130, 246, 0.2)'
}

onMounted(() => {
    // 排序
    tableData.value.sort((a, b) => b.frequency - a.frequency)

    console.log(tableData.value)
})

const init = (module: any) => {
    console.log(JSON.parse(module))
    tableData.value = JSON.parse(module)

}

defineExpose({
    init
})

</script>

<style scoped>
.left-bottom-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* el-table 样式 */
:deep(.el-table) {
    background: transparent !important;
    border: none !important;
}

:deep(.el-table__header) {
    background: transparent !important;
}

:deep(.el-table__body) {
    background: transparent !important;
}

:deep(.el-table tr) {
    background: transparent !important;
}

:deep(.el-table tr:hover) {
    background: rgba(59, 130, 246, 0.1) !important;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: rgba(30, 41, 59, 0.3) !important;
}

:deep(.el-scrollbar__bar) {
    background: rgba(59, 130, 246, 0.2);
}

:deep(.el-scrollbar__thumb) {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 4px;
}

/* 访问频次状态样式 */
.frequency-high {
    color: #4ade80;
    font-weight: bold;
}

.frequency-medium {
    color: #fbbf24;
    font-weight: bold;
}

.frequency-low {
    color: #fb923c;
    font-weight: bold;
}

.frequency-very-low {
    color: #ef4444;
    font-weight: bold;
}
</style>